<template>
	<view class="payment_index">
		<ABanner :isSeach="false" :highLight="highLight" @sendNum="handleTab" :menuList="['退货退款']"></ABanner>
		<view v-for="(item,index) in params.list" :key="index" class="detail_index">
			<view class="tips_title">
				退款中
			</view>
			<view class="shop_detail">
				<view class="pic_content">
					<image
						src="https://img2.baidu.com/it/u=888733543,2955353211&fm=253&fmt=auto&app=138&f=JPEG?w=748&h=450"
						mode="widthFix"></image>
				</view>
				<view class="content">
					<view class="title1">
						{{item.productName}}
						<span>退货原因：{{item.reason}}</span>
					</view>
					<view class="description">
						机器编号：{{item.refundNo}}
					</view>
					<view class="category">
						<!-- 棉柔|夜用 -->
					</view>
				</view>
			</view>
			<!-- <view class="price_title">
				退款中
			</view> -->
			<view class="param_container">
				<!-- 未支付状态 -->
				<view style="display: flex;" v-if="item.orderStatus===-1">

					<button type="default" @click="showCancel=true" class="cancleBtn">取消订单</button>
					<u-modal :show="showCancel" showCancelButton cancelText="取消" @cancel="cancelHandle"
						@confirm="cancelOrderHandle(item)" :content='cancelContent'></u-modal>
					<button @click="payHandle(item)" class="nowPay" v-if="getTimeStamp(item.orderId)>=0" type="default">
						<span class="">
							立即支付
						</span>
						<span v-if="!getTimeStamp(item.orderId)<=0" class="paytime">
							<u-count-down class="timeDown" @change="onChange" :time="getTimeStamp(item.orderId)"
								format="mm:ss"></u-count-down>
						</span>
					</button>
				</view>
				<!-- 已支付0状态 -->
				<view v-if="item.orderStatus===0">
					<button type="default">删除记录</button>
				</view>
				<view v-if="item.orderStatus===6">
					<view type="default" :disabled="true">已超时</view>
				</view>
				<!-- <button type="default"><span v-if="isResult">已超时</span> <span v-else>取消订单</span></button>
                <button v-if="!isResult" type="default">
                    <view class="">
                        继续付款
                    </view>
                    <view class="paytime">
                        <u-count-down @change="onChange" :time="getTimeStamp(item.orderId)"
                            format="mm:ss"></u-count-down>
                    </view>
                </button> -->
			</view>
		</view>
		<view v-if="params.list.length==0" class="empty_container">
			<u-empty text="暂无待付款订单" mode="data" width="100%" iconSize="60" textSize="32"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		getOrder,
		cancelOrder,
		getMyRefund
	} from '@/api/order.js';
	export default {
		data() {
			return {
				itemData: ["退货/退款"],
				params: {
					list: [],
					total: 0
				},
				pageParams: {
					page: 1,
					limit: 10
				},
				timestamp: 0,
				isResult: false,
				showCancel: false,

			};
		},
		onReachBottom() {
			if (this.params.total !== this.params.list.length) {
				this.pageParams.page += 1
				getMyRefund({
					// ...this.pageParams,
					// 'status': 9
				}).then(res => {
					this.params.list = this.params.list.concat(res.data)
					this.params.total = res.data.total
				})
			}
		},
		onLoad() {
			this.getOrderList({
				// ...this.pageParams,
				// 'status': 9
			})
		},
		methods: {
			cancelHandle() {
				// 点击取消订单=>取消=》隐藏模态框
				this.showCancel = false
			},
			// 取消订单
			cancelOrderHandle(item) {
				this.showCancel = false
				cancelOrder(item.orderId).then(res => {
					this.getOrderList({
						// ...this.pageParams,
						// 'status': -1
					})
				})
			},
			getTimeStamp(orderId) {
				let localTime = new Date().getTime()
				let currentItem = this.$store.getters.getTime({
					orderId: orderId,
					uid: this.$store.getters.uid
				})
				console.log(currentItem);
				return ((currentItem?.endTime - localTime) || 0)
			},
			onChange(e) {
				if (e.milliseconds === 0) {
					this.getOrderList({
						// 'status': -1,
						// ...this.pageParams
					})
				}
			},
			getOrderList(data) {
				getMyRefund(data).then(res => {
					this.params.list = res.data
					this.params.total = res.data?.total
				}).catch(res => {
					console.log("error", res);
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.payment_index {
		width: 100%;

		.detail_index {
			background-color: #fff;
			border-radius: 10rpx;
			// margin-top: -30rpx;
			width: 95%;
			margin: -20rpx auto;
			margin-bottom: 40rpx;

			.item_container {
				display: flex;
				flex-direction: column;

				.item_info {

					margin: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.info_item {}

					image {
						padding: 0 20rpx;
						width: 40rpx;
						height: 40rpx;
					}


				}

			}

			.tips_title {
				font-size: 36rpx;
				color: #F86853;
				padding: 20rpx 30rpx;
			}

			.shop_detail {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 100%;
				padding: 20rpx;

				.pic_content {
					width: 30%;

					image {
						width: 100%;
					}
				}

				.content {
					width: 70%;
					margin-left: 20rpx;

					.title1 {
						// font-size: 36rpx;

						span {
							// font-size: 38rpx;
							float: right;
							// font-weight: bold;
						}

					}

					.description {
						margin: 20rpx 0;
						letter-spacing: 0.01rem;
					}

					.category {
						font-size: 24rpx;
						color: #B0B0B0;
					}
				}
			}

			.price_title {
				// float: right;
				text-align: right;
				font-size: 38rpx;
				margin: 20rpx 70rpx;
			}

			.param_container {
				display: flex;
				justify-content: flex-end;
				margin-right: 20rpx;

				.cancleBtn {
					background-color: #fff;
					border: 1px solid #ccc;
				}

				button {
					padding: 10rpx 40rpx;
					margin: 20rpx;
					border-radius: 40rpx;
					display: flex;
					flex-wrap: wrap;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}


				.nowPay {
					background-color: #fff;
					color: #F86853;
					border: 1px solid #F86853;

					/deep/ .u-count-down text {
						color: #F86853;
					}


				}
			}

			.shop_info_desc {
				padding: 20rpx;

				.shop_item {
					margin: 20rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.value {
						color: #A9A9A9;
					}
				}
			}

		}
	}
.empty_container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60vh;

	.u-empty {
		height: 60vh;
	}
}
</style>